<template>
  <div>

      <div>
        <van-row>
          <van-col span="8">
            <table align="center" border="1px" cellspacing="1px" width="100%">
              <tr>
                <th><input type="checkbox"></th>
                <th style="width: 20%">序号</th>
                <th style="width: 20%">角色名称</th>
                <th style="width: 20%">角色编码</th>
                <th style="width: 20%">操作</th>
              </tr>
              <tr v-for="role in rolelist" :key="role.id" @click="getuser(role.id)">
                <th><input type="checkbox" v-model="role.id"></th>
                <td style="width: 20%">{{role.id}}</td>
                <td style="width: 20%">{{role.name}}</td>
                <td style="width: 20%">{{role.num}}</td>
                <td style="width: 20%"><font color="blue">编辑</font>&nbsp;<font color="blue">删除</font></td>
              </tr>
            </table>
          </van-col>
          <van-col span="6" align="center">
<!--            <el-col :span="11">-->
              <el-table
                  :data="data1"
                  border
                  ref="selection"
                  @selection-change="checkAll"
                  style="width: 100%">
                <el-table-column
                    type="selection"
                    width="30">
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="资源编号"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="资源名称"
                    width="100"
                >
                </el-table-column>
              </el-table>
<!--            </el-col>-->
          </van-col>
          <van-col span="4">
<!--            <el-col :span="2">-->
              <div class="opSetting">
                <div @click="handelSelect">
                  <el-button icon="el-icon-d-arrow-right" :disabled="nowSelectData.length?false:true" :size="buttonSize" type="primary" >
                    选中
                  </el-button>
                </div>
                <div class="spacing" @click="handleRemoveSelect">
                  <el-button icon="el-icon-d-arrow-left" :disabled="nowSelectRightData.length?false:true" :size="buttonSize" type="primary">
                    取消
                  </el-button>
                </div>
              </div>
<!--            </el-col>-->
          </van-col>
          <van-col span="6">
<!--            <el-col :span="11">-->
              <el-table
                  :data="selectArr"
                  border
                  ref="selection"
                  @selection-change="checkRightAll"
                  style="width: 100%">
                <el-table-column
                    type="selection"
                    width="30">
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="资源编号"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="资源名称"
                    width="100"
                >
                </el-table-column>
              </el-table>
<!--            </el-col>-->
          </van-col>
        </van-row>






      </div>

  </div>
</template>

<script>
import myaxios from "../../../https/myaxios";
export default {
  name: "permission",
  data() {
    return {
      selectArr:[],  // 右边列表
      buttonSize: 'large',
      options: [],
      value: '',
      data1:[],
      data2:[],
      nowSelectData: [], // 左边选中列表数据
      nowSelectRightData: [], // 右边选中列表数据
      rolelist:[],
      roleid:''
    };
  },
  methods: {
    getrole(){
      myaxios("getrole","get").then(res=>{
        this.rolelist=res.list
      })
    },
    getuser(id){
      this.roleid=id
      myaxios("get_user_resource?roleid="+id,"get").then(res=>{
        this.selectArr=res.list
      })
      this.getdata()
    },
    // getselect(){
    //   myaxios("selectpermission?userid="+localStorage.getItem("userid"),"get").then(res=>{
    //     this.selectArr = res.list
    //   })
    // },
    getdata(){
      myaxios("permission","get").then(res=>{
        this.data1 = res.list
        // this.getselect()
        // for(var i=0;i<this.selectArr.length;i++){
        //   if(this.data2.includes(this.selectArr[i])===false){
        //     this.data1.push(this.data2[i])
        //   }
        // }
        // for(var j=0;j<this.selectArr.length;j++){
        //   for(var i=0;i<this.data2.length;i++){
        //     if(this.selectArr[j]["id"]!==this.data2[i]["id"]){
        //       this.data1.push(this.data2[i])
        //       console.log(this.data1)
        //     }
        //   }
        // }

      })
    },
    checkAll(val){
      this.nowSelectData = val;
    },
    checkRightAll(val) {
      this.nowSelectRightData = val;
    },
    // 选中
    handelSelect(){
      this.selectArr = this.handleConcatArr(this.selectArr, this.nowSelectData)
      let data = new FormData()
      data.append("id",this.roleid)
      data.append("list",JSON.stringify(this.selectArr))
      myaxios('updatePermission',"post",data).then(res=>{
        alert(res.msg)
      })
      this.handleRemoveTabList(this.nowSelectData,  this.data1);
      this.nowSelectData = [];
    },
    // 取消
    handleRemoveSelect() {
      this.data1 = this.handleConcatArr(this.data1, this.nowSelectRightData)
      this.handleRemoveTabList(this.nowSelectRightData,  this.selectArr);
      this.nowSelectRightData = [];
    },
    handleConcatArr(selectArr, nowSelectData) {
      let arr = [];
      arr = arr.concat(selectArr, nowSelectData);
      return arr;
    },
    handleRemoveTabList(isNeedArr,  originalArr) {
      if(isNeedArr.length && originalArr.length) {
        for(let i=0; i<isNeedArr.length; i++) {
          for(let k=0; k<originalArr.length; k++) {
            if(isNeedArr[i]["name"] === originalArr[k]["name"]) {
              originalArr.splice(k, 1);
            }
          }
        }
      }
    }
  },
  mounted() {
    // this.getdata();
    this.getrole()
  }

}
</script>

<style scoped>
.opSetting{
  text-align: center;
  margin-top:30px;
}
.spacing{
  margin-top:10px;
}
</style>